<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
        -1. 定义组件（创建组件）
        -2. 注册组件
        -3. 使用组件（编写组件标签）
        
        1.如何定一个组件：
        使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
        区别如下：
            - el不要写，为什么？ ==> 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
            - data为什么要用函数式写法？ ==> 避免组件被复用时，数据存在引用关系。对象式写法是共用一个内存地址，函数return的每一个都是新的
        备注： 使用template可以配置组件结构
        
        2.如何注册组件：
            - 局部注册：靠new Vue的时候传入components选项
            - 全局注册：靠Vue.component("组件名", 组件)
        
        3.编写组件标签：<school></school>
    -->
    <div id="root1">
      <h1>{{msg}}</h1>
      <!-- 第三步：编写组件标签 -->
      <xuexiao></xuexiao>
      <hr />
      <xuesheng></xuesheng>
      <!-- 这两个复用的组件，里面的值更改互不影响 -->
      <xuesheng></xuesheng>
    </div>
    <div id="root2">
      <hello></hello>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      // 第一步：创建 school 组件
      const school = Vue.extend({
        // 组件定义时，一定不要写el配置项，因为最终所有组件都要被vm管理，由vm决定服务于哪个容器。
        // el:'#root',
        /*  为什么不能用 data:{} 对象式写法
                因为如果我每次复用这个组件，所有依赖于这个组件的 data:{} 对象都是同一个地址
                那么完了，一个地方改，处处数据都跟着变
            */
        template: `
           <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
           </div>
           `,
        data() {
          return {
            schoolName: "尚硅谷",
            address: "北京",
          };
        },
      });
      // 第一步：创建 student 组件
      const student = Vue.extend({
        template: `
           <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
           </div>
           `,
        data() {
          return {
            studentName: "张三",
            age: 18,
          };
        },
      });
      // 第一步：创建 hello 组件
      const hello = Vue.extend({
        template: `
           <div>
                <h1>{{msg}}</h1>
           </div>
           `,
        data() {
          return {
            msg: "hello",
          };
        },
      });

      // 全局注册组件
      Vue.component("hello", hello);
      const vm1 = new Vue({
        el: "#root1",
        data: {
          msg: "你好啊",
        },
        // 第二步：注册组件（局部注册）
        components: {
          xuexiao: school, // key:value 同名可以省略成 key     value才是组件真实的位置，key是使用组件的时候用的名
          xuesheng: student,
        },
      });

      const vm2 = new Vue({
        el: "#root2",
      });
    </script>
  </body>
</html>
